{% extends "communications/base.html" %}
{% load static %}

{% block title %}
文章详情
{% endblock %}
{% block right %}

<!-- 文章详情 -->
<div class="container">
    <div class="row" style="box-shadow: 0 0px 10px #e3e3e3;height:auto">
        <div class="col-md-12" style="border-bottom: 1px solid #e3e3e3;padding-bottom:15px;padding-top:10px">
            <!-- 作者 -->
            <div class="col-sm-5" style="line-height:45px;height:45px">
                <div class="post_author_img col-sm-1;" style="float:left">
                    <a href="{% url 'users:base-information' post.author.id %}"
                       style="height: 45px; padding-top: 0;padding-bottom: 0;">
                        {% if post.author.image %}
                        <img src="{{ post.author.image.url }}" alt="头像" class="img-circle"
                             style="height: 45px;width: auto;"/>
                        {% else %}
                        <img src="{% static 'images/users/settings/sample.jpg' %}" alt="默认图像" class="img-circle"
                             style="height: 45px;width: auto;"/>
                        {% endif %}
                    </a>
                </div>
                <div class="col-md-7">
                    <div class="post_author_name col-md-12"
                         style="float:left;height:25px;line-height:25px;overflow:hidden;padding-left:0px;margin-bottom:0px">
                        <h5 style="height:25px;line-height:25px;overflow:hidden;color:black;margin-top:3px;margin-bottom:0px;padding-right:0px">
                            &nbsp;&nbsp;
                            {{ post.author }}</h5>
                    </div>
                    <!-- 显示浏览量 -->


                    <small class="col-md-11"
                           style="color: gray;margin: 0 auto;height:20px;line-height:20px;padding-left:0px;padding-right:0px;margin-left:10px">
                        {{ post.created_time }}
                    </small>


                </div>


            </div>


            {% if user == post.author %}
            <div class="col-md-12" style="padding-left:50px;padding-top:20px;padding-bottom:20px">
                <a href="{% url 'communications:postDelete' post.id %}">删除文章</a>
                <a href="{% url 'communications:postUpdate' post.id %}">
                    编辑文章
                </a>
            </div>
            {% endif %}
            <br>


        </div>
        <div class="col-md-12 titleTag">
            <!--文章标题-->
            <div style="color:black;text-align:center" class="col-md-5 col-md-offset-3">
                <h3>{{ post.title }}</h3>
                <!-- 标签 -->
            </div>
            <div class="col-md-4" style="margin-top:25px">
                        <span style="float:left;">
                        {% for tag in post.tags.all %}
                        <div
                                class="badge badge-secondary"
                        >
                        {{ tag }}
                        </div>
                        {% endfor %}
                        </span>
            </div>
        </div>


        <div class="col-md-12" style="align:center;word-wrap:break-word;word-break: break-all;">
            <div style="width:835px;margin:0 auto">
                <p style="word-wrap:break-word;word-break: break-all;">{{ post.content|safe }}</p>
            </div>

        </div>
        <div class="col-md-12" style="height:80px">

        </div>
        <!--<img src="{% static 'images/communications/changda.png' %}" width="120" height="120" alt=""> -->
        <div class="col-md-2 col-md-offset-10">
            {% if request.user.is_authenticated %}
            <a class="btn btn-success btn-xs" href="{% url 'communications:postLike' post.id %}"
               role="button">
                {% if request.user in post.likeUser.all %}
                <span class="glyphicon glyphicon-heart"></span>
                {% else %}
                <span class="glyphicon glyphicon-heart-empty"></span>
                {% endif %}
                &nbsp;<span class="badge">{{post.no_like}}</span>
            </a>
            <!--                {% if post.postlike_set.count != 0 %}-->
            <!--                {% for postlike in post.postlike_set.all %}-->
            <!--                {% if request.user == postlike.author %}-->
            <!--                <span class="glyphicon glyphicon-heart"></span>-->

            <!--                {% else %}-->
            <!--                <span class="glyphicon glyphicon-heart-empty"></span>-->

            <!--                {% endif %}-->

            <!--                {% endfor %}-->
            <!--                {% else %}-->
            <!--                <span class="glyphicon glyphicon-heart-empty"></span>-->
            <!--                {% endif %}-->
            <!--                &nbsp;<span class="badge">{{post.no_like}}</span></a>-->
            {% else %}
            <a class="btn btn-success btn-xs" href="{% url 'users:login' %}"
               role="button">

                {% if like_status %}

                <span class="glyphicon glyphicon-heart"></span>
                {% else %}
                <span class="glyphicon glyphicon-heart-empty"></span>
                {% endif %}
                &nbsp;<span class="badge">{{post.no_like}}</span></a>
            {% endif %}

            <!--                <a class="collect btn btn-default btn-xs" role="button">收藏&nbsp;<span class="glyphicon glyphicon-star-empty"-->
            <!--                                                                               aria-hidden="true"></span></a>-->
            <!--                <a class="btn btn-default btn-xs" role="button">评论</a>-->
            <!-- 显示浏览量 -->

            &nbsp;
            <span style="color: gray;">

                                <span style="" class="glyphicon glyphicon-comment"></span> {{ post.no_comment }}

                    </span>
            &nbsp;
            <span>
                            <small class="col align-self-end" style="color: gray;">
                                <span class="glyphicon glyphicon-eye-open"></span> {{ post.no_visitor }}
                            </small>
                    </span>
            <br><br>
        </div>
        <!-- 发表评论 -->

        {% if request.user.is_authenticated %}
        <div class="col-md-12">
            <form
                    action="{% url 'communications:postComment' post.id %}"
                    method="POST"
            >
                {% csrf_token %}
                <div class="form-group">
                    <label for="content">
                        <strong>
                            我也要发言：
                        </strong>
                    </label>
                    <textarea
                            type="text"
                            class="form-control"
                            id="content"
                            name="content"
                            rows="2"></textarea>
                </div>
                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary ">发送</button>
            </form>
        </div>
        <br>
        {% else %}
        <div class="container col-md-12">
            <br>
            <h5 class="row justify-content-center">
                请<a href="{% url 'users:login' %}">登录</a>后回复
            </h5>
            <br>
        </div>

        {% endif %}


        <!-- 显示评论 -->
        <div class="container col-md-12">
            <h4>共有{{ post_comments.count }}条评论</h4>
            <div>
                {% for comment in post_comments %}
                <hr>
                <p>
                    <strong style="color: pink">
                        {{ comment.author }}
                    </strong> 于
                    <span style="color: green">
                    {{ comment.created_time|date:"Y-m-d H:i:s" }}
                </span> 时说：
                </p>
                <pre style="font-family: inherit; font-size: 1em;">
{{ comment.content }}</pre>
                {% endfor %}
            </div>

        </div>

    </div>

</div>

{% endblock %}